import { Component, ElementRef, Renderer2 } from '@angular/core';
import { ApesField } from './apes-field';
import { ApiService } from '@core/services/http/api.service';
import { Events } from '@core/services/events/Events';
import { ExpressionService } from '@core/services/expression/ExpressionService';
import { SubjectService } from '@core/services/events/subject.service';
import { getO } from '../../../../utils/utils';

@Component({
  selector: 'formly-field-radio',
  template: `
    <!--<div [formGroup]="form">-->
    <!--<div *ngFor="let option of to.options; let i = index;" class="radio">-->
    <!--<label class="custom-control custom-radio">-->
    <!--<input-->
    <!--[name]="id"-->
    <!--[id]="id + '_' + i"-->
    <!--type="radio"-->
    <!--[value]="option.key"-->
    <!--[formControl]="formControl"-->
    <!--[formlyAttributes]="field" class="custom-control-input">-->
    <!--{{ option.value }}-->
    <!--<span class="custom-control-indicator"></span>-->
    <!--</label>-->
    <!--</div>-->
    <!--</div>-->

    <apes-radio-group style="width: 100%" *ngIf="valueKey == ''" [formControl]="formControl" [formlyAttributes]="field">
      <div apes-row>
        <ng-container *ngFor="let item of  items">
          <div apes-col [apesSpan]="item.span? item.span:8">
            <label apes-radio [apesValue]="item.value">{{item.label}}</label>
          </div>
        </ng-container>
      </div>
    </apes-radio-group>

    <apes-radio-group style="width: 100%" *ngIf="valueKey != ''" [formControl]="formControl" [formlyAttributes]="field">
      <div apes-row>
        <ng-container *ngFor="let item of  items">
          <div apes-col [apesSpan]="item.span? item.span:8">
            <label apes-radio [apesValue]="item">{{item.label}}</label>
          </div>
        </ng-container>
      </div>
    </apes-radio-group>
  `,
})
export class FormlyFieldRadio extends ApesField {
  items: any;

  constructor(protected apiService: ApiService, protected events: Events, protected expressionService: ExpressionService, protected subject: SubjectService,protected elementRef: ElementRef, protected renderer: Renderer2) {
    super(apiService, events, expressionService, subject);
  }

  valueKey: any = '';

  ngOnInit(): void {
    super.ngOnInit();
    if (this.to['options'] && typeof this.to['options'] == 'string') {
      this.items = getO(this.to['options']);
    } else {
      this.items = this.to['options'];
    }
    if (this.to.hasOwnProperty('valueKey')) {
      this.valueKey = this.to.valueKey;
    }
    this.addEventListener(this.elementRef, this.renderer);
  }
}

